<header id="header" data-current-skin={{mactrl.currentSkin}} data-ng-include="'template/header.html'" data-ng-controller="headerCtrl as hctrl"></header>

<section id="main">
    <aside id="sidebar" data-ng-include="'template/sidebar-left.html'" data-ng-class="{ 'toggled': mactrl.sidebarToggle.left === true }"></aside>

    <aside id="chat" data-ng-include="'template/chat.html'" data-ng-class="{ 'toggled': mactrl.sidebarToggle.right === true }"></aside>

    <section id="content" data-ng-controller="calendarCtrl as clctrl">
        <div class="container c-alt" data-ng-controller="ModalDemoCtrl">
            <div class="block-header">
                <h2>Calendar <small>FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.</small></h2>

                <ul class="actions">
                    <li>
                        <a href="">
                            <i class="zmdi zmdi-trending-up"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="zmdi zmdi-check-all"></i>
                        </a>
                    </li>
                    <li class="dropdown" uib-dropdown>
                        <a href="" uib-dropdown-toggle>
                            <i class="zmdi zmdi-more-vert"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <a href="">Refresh</a>
                            </li>
                            <li>
                                <a href="">Manage Widgets</a>
                            </li>
                            <li>
                                <a href="">Widgets Settings</a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>

            <div id="calendar" data-calendar data-action-links="clctrl.actionMenu" data-select="clctrl.onSelect(start, end)"></div>
            
            <!-- Add event -->
            <script type="text/ng-template" id="addEvent.html">
                <div class="modal-header">
                    <h4 class="modal-title">Add an Event</h4>
                </div>
                <div class="modal-body">
                    <form class="addEvent" role="form">
                        <div class="form-group" data-ng-class="{ 'has-error': calendarData.eventName === '' }">
                            <label for="eventName">Event Name</label>
                            <div class="fg-line">
                                <input type="text" class="input-sm form-control" data-ng-model="calendarData.eventName" placeholder="eg: Sports day">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="eventName">Tag Color</label>
                            <div class="event-tag" data-ng-class="{ 'active': activeState }">
                                <span data-ng-repeat="w in tags" data-tag="{{ w }}" class="{{ w }}" data-ng-class="{ 'selected': activeState === $index }" data-ng-click="onTagClick(w, $index)"></span>
                            </div>
                        </div>

                        <input type="hidden" data-ng-model="getStart" />
                        <input type="hidden" data-ng-model="getEnd" />

                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-ng-click="addEvent()">Add Event</button>
                    <button type="button" class="btn btn-link" data-ng-click="eventDismiss()">Close</button>
                </div>
            </script>
        </div>
    </section>
</section>

<footer id="footer" data-ng-include="'template/footer.html'"></footer>
